{% load staticfiles %}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
    <!-- CSS Files -->
    <link rel="stylesheet" type="text/css" href="{% static 'plugins/material-bootstrap-wizard-v1.0.2/assets/css/bootstrap.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'dist/css/create_scraping_task.css' %}">
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link rel="stylesheet" type="text/css" href="{% static 'plugins/material-bootstrap-wizard-v1.0.2/assets/css/demo.css' %}">
</head>

<body style="background-color: transparent;">
    <!--   Big container   -->
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                <!--      Wizard container        -->
                <div class="wizard-container">
                    <!-- You can switch " data-color="purple" "  with one of the next bright colors: "green", "orange", "red", "blue" -->
                    <div class="card wizard-card" data-color="green" id="wizardProfile">
                        <form action="" method="">
                            <div class="header">
                                <button type="button" id="close-btn" class="btn btn-danger btn-fab btn-fab-mini btn-round close-btn">
                                    <i class="material-icons">clear</i>
                                </button>
                            </div>
                            <div class="wizard-header">
                                <h3 class="wizard-title">
                                    创建数据采集规则
                                </h3>
                                <h5>根据如下步骤创建适合你的数据采集规则</h5>
                            </div>
                            <div class="wizard-navigation">
                                <ul>
                                    <li><a href="#about" data-toggle="tab">1. 设置数据源</a></li>
                                    <li><a href="#account" data-toggle="tab">2. 设置数据存储位置</a></li>
                                    <li><a href="#address" data-toggle="tab">3. 设置采集规则</a></li>
                                </ul>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane" id="about">
                                  <div class="row">
                                    	<h4 class="info-text"> Let's start with the basic information (with validation)</h4>
                                	</div>
                                </div>
                                <div class="tab-pane" id="account">
                                    <h4 class="info-text"> What are you doing? (checkboxes) </h4>
                                </div>
                                <div class="tab-pane" id="address">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <h4 class="info-text"> Are you living in a nice area? </h4>
                                        </div>
                                </div>
                            </div>
                            <div class="wizard-footer">
                                <div class="pull-right">
                                    <input type='button' class='btn btn-next btn-fill btn-success btn-wd' name='next' value='下一步' />
                                    <input type='button' class='btn btn-finish btn-fill btn-success btn-wd' name='finish' value='保存' />
                                </div>

                                <div class="pull-left">
                                    <input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='上一步' />
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </form>
                    </div>
                </div> <!-- wizard container -->
            </div>
        </div><!-- end row -->
    </div> <!--  big container -->
</body>
    <!--   Core JS Files   -->
    <script type="text/javascript" src="{% static 'plugins/material-bootstrap-wizard-v1.0.2/assets/js/jquery-2.2.4.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'plugins/material-bootstrap-wizard-v1.0.2/assets/js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'plugins/material-bootstrap-wizard-v1.0.2/assets/js/jquery.bootstrap.js' %}"></script>
    <!--  Plugin for the Wizard -->
    <script type="text/javascript" src="{% static 'dist/js/create_scraping_task.js' %}"></script>
    <!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
    <script type="text/javascript" src="{% static 'plugins/material-bootstrap-wizard-v1.0.2/assets/js/jquery.validate.min.js' %}"></script>
    <script type="text/javascript">
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        $("#close-btn").on("click", function(){ // 关闭按钮事件
            parent.layer.iframeAuto(index);
            parent.layer.close(index);
        });
    </script>
</html>
